{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>肉鸽爬塔游戏</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <style>
        .top-bar {
            background-color: #333;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
        }

        .logo img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }

        .user-menu {
            position: relative;
            display: inline-block;
        }

        .user-button {
            background: none;
            border: none;
            color: white;
            padding: 8px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-button:hover {
            background-color: #444;
            border-radius: 4px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 4px;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: background-color 0.2s;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .user-menu:hover .dropdown-content {
            display: block;
        }

        .main-nav {
            background-color: #444;
            padding: 10px 20px;
        }

        .main-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 20px;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .main-nav a:hover {
            background-color: #555;
        }
    </style>
    <script>
    console.log('Base template loading...');
    </script>
</head>
<body>
    <div class="top-bar">
        <a href="{% url 'game_core:home' %}" class="logo">
            <img src="{% static 'images/logo.png' %}" alt="Logo" onerror="this.src='{% static 'images/default-logo.png' %}'">
            <span>肉鸽爬塔</span>
        </a>
        <div class="user-menu">
            <button class="user-button">
                {{ request.user.username }}
                <span>▼</span>
            </button>
            <div class="dropdown-content">
                <a href="{% url 'accounts:profile' %}">个人资料</a>
                <a href="{% url 'accounts:edit_profile' %}">修改密码</a>
                <a href="{% url 'accounts:logout' %}">登出</a>
            </div>
        </div>
    </div>
    
    <nav class="main-nav">
        <ul>
            <li><a href="{% url 'game_core:home' %}">主页</a></li>
            <li><a href="{% url 'game_core:tower' %}">爬塔</a></li>
            <li><a href="{% url 'game_core:upgrade' %}">升级</a></li>
            <li><a href="{% url 'collection:index' %}">图鉴</a></li>
        </ul>
    </nav>
    
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
    
    {% comment %} <script src="{% static 'js/main.js' %}"></script> {% endcomment %}
    <script>
    console.log('Base template loaded');
    </script>
</body>
</html>